import React,
{
    Component
}

    from 'react'
import { connect } from "react-redux";
import style from './Home.module.scss'
import { schart1 } from './smash/Home_Charts1'
import moment from 'moment';
import {indexDashboard} from '../../services/homeApi';
import {
    Form,
    Button,
    DatePicker,

} from 'antd';
const { RangePicker } = DatePicker;
class Home extends Component {
    constructor(values) {
        super(values);

        this.state = {
            data: []
        }

    }


    componentDidMount() {
        const { homeData } = this.props;
        homeData();
        indexDashboard().then(res=>{
            schart1(res.data);
            this.props.indexDashboard();
        })



    }

    box = (type, text, num) => {
        return <div className={type === 1 ? style.cube1 : style.cube2}>
            <span className={style.content}>{num}</span>
            <span className={style.text}>{text}</span>
        </div>

    }
    onFinish = (values) => {
        let date = values.beginTime
        values.beginTime = date ? moment(date[0]).format('YYYY-MM-DD') : "";
        values.endTime = date ? moment(date[1]).format('YYYY-MM-DD') : "";
        //
        if (values)
            indexDashboard(values).then(r=>{
                if (r.code===200)
                    schart1(r.data)});
         else{
            const { echartsData } = this.props;
            this.props.indexDashboard();
            const data= echartsData?echartsData:{}
            schart1(data)
        }
           // indexDashboard().then(r=>{schart1(r.data)});

    }
    render() {
        const { data } = this.props
        return (<div>
            <div className={style.warp}  >
                <div className={style.top}>
                    {this.box(1, '注册人数', data.memberCount ? data.memberCount : '0')}
                    {this.box(2, '充值人数', data.ProductionYear ? data.ProductionYear : '0')}
                    {this.box(1, '发单人数', data.publishOrderMemberCount ? data.publishOrderMemberCount : '0')}
                    {this.box(2, '接单人数', data.consumerOrderMemberCount ? data.consumerOrderMemberCount : '0')}
                    {this.box(1, '盈利总额', data.companyCommission ? data.companyCommission : '0')}
                    {/* {this.box(1, '结算总额', 66666)}
                    {this.box(2, '盈利总额', 66666)}
                    {this.box(1, '注册人数', 66666)} */}



                </div>
                <div className={style.middle}>
                    <Form
                        style={{ marginTop: 20, marginLeft: 50 }}
                        name="basic"
                        layout='inline'
                        // wrapperCol={{ span: 6 }}
                        onFinish={this.onFinish}
                        autoComplete="off"

                    >
                        <Form.Item
                            style={{ marginTop: 20, }}
                            label="开始时间"
                            name="beginTime"
                        // rules={[{ message: 'Please input your username!' }]}
                        >
                            <RangePicker
                                // showTime
                                ranges={{
                                    // Today: [moment(), moment()],
                                    '本周': [moment().startOf('week'), moment().endOf('week')],
                                    '本月': [moment().startOf('month'), moment().endOf('month')],
                                }}
                                style={{ marginRight: 20, width: 250 }} />

                        </Form.Item>

                        <Form.Item style={{ marginLeft: 30, marginTop: 20 }}>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                            <Button type="primary" htmlType='reset' style={{ marginLeft: 30 }}>
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className={style.bottom} id='main'>

                </div>
            </div>
        </div >)
    }
}

const mapState = state => ({
    ...state.homeData,
    // ...state.indexDashboard
});
const mapDispatch = dispatch => ({
    ...dispatch.homeData,
    // ...dispatch.indexDashboard

});


export default connect(mapState, mapDispatch)(Home);
